화면 UI 레이아웃 템플릿 사용하기

업무 데이터의 관계를 보고 알맞은 화면 템플릿을 선택합니다.

QCN

잠깐, 구분해 보기

행 하나의 입력과 목록·상세 편집은 어떤 점이 다를까요?

QCN

패턴 목록

ID 패턴명 용도
TPL000 UX 레퍼런스 인터페이스, 항목 디자인
TPL010 마스터/디테일 조회 조건 및 CRUD 가능한 그리드 목록
TPL020 단일 마스터 단일 Row 입력 폼 서식
TPL030 멀티 마스터 여러 입력 영역의 단일 Row 폼
TPL040 멀티 마스터/멀티 디테일 여러 입력 영역과 상세 목록의 조합
QCN

템플릿 적용의 완료 기준

  • TPL000에서 공통 UX를 확인하고 업무 관계에 맞는 패턴을 고릅니다.
  • HTML뿐 아니라 같은 이름의 JS와 거래 매핑도 확인합니다.
  • 빈 목록·단일 행·여러 행을 시험해 선택과 저장 범위를 검증합니다.
QCN

발표: 첫 화면의 목표를 말한 뒤 핵심 개념과 예제로 진행합니다. 확인 질문 뒤에는 답할 시간을 주고, 마지막 완료 기준을 남겨 질문을 받습니다. 발표 구성 참고: MIT OpenCourseWare, Patrick Winston, How to Speak (2018), https://ocw.mit.edu/courses/res-tll-005-how-to-speak-january-iap-2018/pages/how-to-speak/

질문 후 잠시 기다립니다. 답이 없으면 앞에서 본 예제를 다시 가리킵니다. 확인할 답: 단일 Row의 필드 구성과 여러 Row의 선택·저장 범위를 먼저 구분합니다. 다음 주제로 넘어가기 전에 차이를 청중의 표현으로 한 번 확인합니다.

질문을 받는 동안 이 확인 기준을 화면에 남깁니다. 청중이 자신의 업무에 적용할 다음 행동 하나를 고르게 합니다.